<template>
    <div>
        <el-dialog :title="form.id?'菜单编辑':'菜单添加'" :visible.sync="buffer.isShow">
            <el-form :model="form">
                {{form}}
                <!-- 顶级菜单区域 -->
                <el-form-item label="顶级菜单" :label-width="formLabelWidth">
                    <el-select v-model="form.pid" :disabled="form.id?true:false" placeholder="请选择顶级菜单" @change="changeTopMenu">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option 
                        v-for="item in menuList"
                        :key="item.id"
                        :label="item.title" 
                        :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 一级菜单图标 -->
                <el-form-item label="菜单图标" :label-width="formLabelWidth" v-if="form.pid==0">
                    <icon-picker v-model="form.icon"></icon-picker>
                </el-form-item>
                <!-- 二级菜单地址 -->
                <el-form-item label="菜单地址" :label-width="formLabelWidth" v-else>
                    <el-input v-model="form.url" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 菜单名称 -->
                <el-form-item label="菜单名称" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 菜单类型 -->
                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-radio disabled v-model="form.type" :label="1">目录</el-radio>
                    <el-radio disabled v-model="form.type" :label="2">菜单</el-radio>
                </el-form-item>
                <!-- 菜单状态 -->
                <el-form-item label="菜单状态" :label-width="formLabelWidth">
                     <el-switch
                        v-model="form.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="buffer.isShow = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button
            >
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  props: ['buffer','menuList'],
  watch:{
    buffer:{
        handler(newV,oldV){
            //2.7赋空表单数据
            if(!newV.isShow){
                //监听窗口关闭
                 this.form={
                        pid: '',//父级菜单id
                        title: '',//菜单名称
                        icon: '',//一级菜单图标
                        type: 1,//菜单类型 1 2
                        url: "",//二级菜单地址
                        status: 1,//菜单状态 1 2
                    }
            }
        },
        deep:true
    }
  },
  data() {
    return {
        form: {
          pid: '',//父级菜单ID
          title: '',//菜单名称
          icon: '',//一级菜单图标
          type: 1,//菜单类型
          url: "",//二级菜单地址
          status: 1,//菜单状态 1  2 
        },
        
        dialogTableVisible: false,
        dialogFormVisible: true,
        
        formLabelWidth: '120px'
    };
  },
  mounted() {},
  methods: {
    //1.监听顶级菜单切换
    changeTopMenu(id){
        if(id==0){
            this.form.type=1
            //在添加时如果提交之后再修改会留下所以需要清除
            this.form.url=""//清除二级菜单地址
        }else{
            this.form.type=2
            this.form.icon=""//清除一级菜单图标
        }
    },
    //2.提交新增菜单数据
    submit(){
        //2.1获取提交数据
        //2.2检验数据格式
        //2.3执行提交操作
        (this.form.id ? this.$api.reqMenuEdit(this.form) :this.$api.reqMenuAdd(this.form))
        .then(res=>{
            //2.4关闭弹窗
            this.buffer.isShow=false
            //2.5提示用户操作成功
            this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success'
            });
            //2.6更新菜单列表数据
            //子传父通过
            //this.$emit ('父亲传递的自定义事件名字','传递的数据')
            this.$emit('channel','ok')
            //2.7赋空表单
            
        })
        .catch(err=>console.log(err))
    }
  },
};
</script>

<style scoped>
</style>
